<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>网络收藏夹|首页</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" onclick="window.location.reload();">
            <img src="images/logo.svg">网络收藏夹
        </div>
        <div class="layui-layout-left">
            <div class="search-input">
                <i id="searchMike" class="layui-icon layui-icon-mike search-mike"></i>
                <input type="text" id="search_name" name="search_name" placeholder="搜分类/搜书签/搜问题/输入快捷指令"
                       autocomplete="off"
                       class="layui-input">
                <i id="search_close" class="layui-icon layui-icon-close-fill search-close layui-anim layui-anim-fadein"
                   style="display:none;"></i>
                <ul class="search-items layui-anim layui-anim-fadein"></ul>
            </div>
            <button id="searchBtn" type="button" class="layui-btn layui-btn-sm layui-bg-gradient layui-hide-xs"
                    lay-title="搜索内容">查询
            </button>
            <button id="searchTo" type="button" class="layui-btn layui-btn-sm layui-bg-gradient"
                    lay-title="搜问题 Ctrl+Q">搜问题
            </button>
            <button id="notice" style="display:none" type="button"
                    class="layui-btn layui-btn-sm layui-bg-gradient layui-hide-xs"><em>公告</em><span
                    class="layui-badge-dot"></span></button>
        </div>
        <div class="layui-layout-right layui-hide-xs">
            <div class="layui-form style-select" lay-filter="styleSelect">
                <div class="layui-input-inline">
                    <input type="checkbox" name="viewStyle" lay-skin="switch" lay-text="书签模式|常规模式"
                           lay-filter="viewStyle">
                </div>
            </div>
            <ul class="layui-nav ">
                <li class="layui-nav-item"><a href="share.html">书签库</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-user" id="userImg"></i>
                        <span id="username">默认</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="info">个人信息</a></dd>
                        <dd><a href="javascript:;" id="recycle">管理收藏</a></dd>
                        <dd><a href="javascript:;" id="importOrExportBtn">导入与备份</a></dd>
                        <dd><a href="javascript:;" id="report">我的报告</a></dd>
                        <dd><a href="javascript:;" id="logout">安全退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body" id="layuiBody" style="left: 0;">
        <!-- 内容主体区域 -->
        <div class="main" id="main">
            <blockquote class="layui-elem-quote favorites-link" style="display:none">
                <i class="layui-icon layui-icon-link"></i>
                <p class="layui-elip link-name"></p>
                <p class="layui-elip link-url"></p>
                <button type="button" class="layui-btn layui-btn-sm" onclick="saveLink()">保存</button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="cancelLink()">取消
                </button>
            </blockquote>
            <div id="starDiv"></div>
            <div id="dataDiv">
                <div id="categoryList"></div>
            </div>
            <div id="searchDiv" style="display:none;"></div>
            <div id="positionDiv" style="display:none;">
                <div class="positionNav">
                <span class="layui-breadcrumb" lay-separator="/">
                    <a href="javascript:window.location.reload();">首页</a>
                    <a><cite>分类</cite></a>
                </span>
                </div>
                <div id="positionData"></div>
            </div>
        </div>
    </div>
    <div class="layui-footer" style="left: 0;">
        <ul class="open-source">
            <li class="open-source-item">
                <span>© 2020 网络收藏夹</span>
            </li>
            <li class="open-source-aux">|</li>
            <li class="open-source-item">
                <a href="https://gitee.com/wangxiaoyuan_2019/web-favorites.git" target="_blank">网站源码</a>
            </li>
            <li class="open-source-aux">|</li>
            <li class="open-source-item layui-click">
                <i class="layui-icon layui-icon-email"></i>
                <span id="feedback" style="margin-left: 2px;">我要反馈</span>
            </li>
        </ul>
    </div>
</div>
<!-- 操作按钮 -->
<div class="layui-btn-container layui-anim layui-anim-fadein"
     style="position: fixed;left: 15px;bottom: 44px;z-index: 99999;display: flex;">
    <span id="slideBtn" class="layui-icon layui-icon-spread-left" lay-title="目录 Ctrl+Z" lay-tips="2"></span>
    <button type="button" class="layui-btn" id="addCategoryBtn">添加分类</button>
    <button type="button" class="layui-btn" id="addFavoritesBtn">添加收藏</button>
    <button type="button" class="layui-btn layui-hide-xs" id="fastNavBtn" lay-title="快捷导航 Ctrl+X" lay-tips="2">
        快捷导航
    </button>
    <button type="button" class="layui-btn" id="addLinkBtn">链接收藏</button>
</div>
<!-- 暂无数据 -->
<div id="notFoundDiv" class="notFoundDiv">
    <img src="images/no_data.svg" alt="">
    <span>暂无数据</span>
</div>
<div id="templateDiv" class="templateDiv" style="display:none">
    <div class="content">从模版导入收藏内容，需要先下载对应模版，并填写内容信息。确认已填写吗？</div>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" id="importTemplate">导入模版</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="downloadTemplate">下载模版</button>
    </div>
</div>
<!-- 导入/备份 -->
<div class="layui-tab layui-tab-brief" id="importOrExport" style="display: none;">
    <ul class="layui-tab-title">
        <li class="layui-this">导入</li>
        <li>备份</li>
    </ul>
    <div class="layui-tab-content" style="text-align: center;">
        <div class="layui-tab-item layui-show">
            <div style="margin-top: 30px;">
                <button type="button" class="layui-btn" id="import">导入收藏夹</button>
                <button style="vertical-align: bottom;margin-left: 5px;" type="button"
                        class="layui-btn layui-btn-sm layui-btn-warm" id="importLocal">从浏览器导入
                </button>
                <i class="layui-icon layui-icon-tips local-tip"
                   lay-title="请先将书签从其他浏览器导出为html格式，再将导出的文件上传至服务器"></i>
            </div>
            <div style="margin: 20px 0;color: #5e6d82;line-height: 32px;font-size: 12px;">
                请将【export.xml】文件上传至服务器
                <span style="cursor: pointer;color: #1e9fff;" id="importBtn">模版导入</span>
            </div>
        </div>
        <div class="layui-tab-item">
            <div style="margin-top: 30px;margin-bottom: 10px;">
                <button type="button" class="layui-btn" id="export">备份收藏夹</button>
                <span id="cleanData">清除所有数据</span>
            </div>
            <div class="layui-form" lay-filter="userData">
                <div class="layui-form-item">
                    <label class="layui-form-label">备份数据</label>
                    <div class="layui-input-block backupList" style="text-align: left;">
                        <input type="checkbox" id="favorites" name="favorites" title="收藏" lay-skin="primary" checked>
                        <input type="checkbox" id="moment" name="moment" title="瞬间" lay-skin="primary" checked>
                        <input type="checkbox" id="task" name="task" title="日程" lay-skin="primary" checked>
                        <input type="checkbox" id="search" name="search" title="搜索" lay-skin="primary" checked>
                        <input type="checkbox" id="navigation" name="navigation" title="导航" lay-skin="primary"
                               checked>
                        <input type="checkbox" id="memorandum" name="memorandum" title="备忘录" lay-skin="primary"
                               checked>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 添加收藏表单 -->
<form class="layui-form" action="" id="add-favorites" lay-filter="add-favorites"
      style="display: none;padding: 10px 20px 10px 10px">
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline" style="width: 210px;">
            <textarea name="url" id="url_input" required lay-verify="required|url" placeholder="请输入地址"
                      class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline" style="width: 210px;">
            <input type="text" name="name" id="name_input" required lay-verify="required" placeholder="请输入名称"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <i id="url_loading"
           class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop url_loading"
           style="display:none;"></i>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline" style="width: 210px;">
            <input type="text" name="categoryId" id="categoryId" required lay-verify="required" placeholder="请输入分类"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <i id="addCategoryIcon" class="layui-icon layui-icon-add-circle" lay-title="添加分类"></i>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分享</label>
        <div class="layui-input-inline" style="width: 50px;">
            <input type="checkbox" name="isShare" lay-skin="switch" value="1" checked>
        </div>
        <div class="layui-form-mid layui-word-aux">分享到书签库</div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addFavorites">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" id="cancelAddFavorites">取消</button>
        </div>
    </div>
</form>
<!-- 添加快捷导航 -->
<form class="layui-form" action="" id="add-fastNav" lay-filter="add-fastNav"
      style="display: none;padding: 10px 20px 10px 10px">
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline" style="width: 210px;">
            <textarea name="url" id="nav_url_input" required lay-verify="required|url" placeholder="请输入地址"
                      class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline" style="width: 210px;">
            <input type="text" name="name" id="nav_name_input" required lay-verify="required" placeholder="请输入名称"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <i id="nav_url_loading"
           class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop url_loading"
           style="display:none;"></i>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addFastNav">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" id="cancelAddFastNav">取消</button>
        </div>
    </div>
</form>
<!-- 编辑收藏表单 -->
<form class="layui-form" action="" id="update-favorites" lay-filter="update-favorites"
      style="display: none;padding: 10px 0;">
    <input type="hidden" name="id" id="favoritesId">
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline" style="width: 210px;">
            <textarea name="url" id="edit_url_input" required lay-verify="required|url" placeholder="请输入地址"
                      class="layui-textarea"></textarea>
        </div>
        <button type="button" id="edit_url_input_copy" class="layui-btn layui-btn-primary layui-btn-xs copy-btn"
                data-clipboard-target="#edit_url_input">复制
        </button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline" style="width: 210px;">
            <input type="text" name="name" id="edit_name_input" required lay-verify="required" placeholder="请输入名称"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <i id="edit_url_loading"
           class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop url_loading"
           style="display:none;"></i>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline" style="width: 210px;">
            <input type="text" name="categoryId" id="editCategoryId" required lay-verify="required"
                   placeholder="请输入分类"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <i id="addCategoryIconEdit" class="layui-icon layui-icon-add-circle" lay-title="添加分类"></i>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="sort" id="favoritesSort" placeholder="请输入数值" autocomplete="off"
                   class="layui-input layui-disabled" disabled>
        </div>
        <div id="favoritesSetTop">移动至最前</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标记</label>
        <div class="layui-input-inline" style="width: 50px;">
            <input type="checkbox" name="star" lay-skin="switch" value="1" lay-filter="starSwitch">
        </div>
        <div class="layui-form-mid layui-word-aux">标记为常用网址</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">App</label>
        <div class="layui-input-inline" style="width: 210px;">
            <input type="text" name="schemaName" placeholder="请输入app schema名称"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">快捷指令</label>
        <div class="layui-input-inline" style="width: 210px;">
            <input type="text" name="shortcut" lay-verify="shortcut" placeholder="例如：打开...或Open..."
                   autocomplete="off"
                   class="layui-input">
            <span style="color: #ff5722;font-size: 12px;margin-top: 5px;display: block;">温馨提示：配合语音输入效果更佳哦</span>
            <i id="shortcutMike" class="layui-icon layui-icon-mike shortcut-mike"></i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分享</label>
        <div class="layui-input-inline" style="width: 50px;">
            <input type="checkbox" name="isShare" lay-skin="switch" value="1" lay-filter="shareSwitch">
        </div>
        <div class="layui-form-mid layui-word-aux">分享到书签库</div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="updateFavorites">立即提交</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="deleteFavorites">删除</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="settingPwd">管理密码</button>
        </div>
    </div>
</form>
<!-- 管理密码表单 -->
<form class="layui-form" action="" id="setting-pwd" lay-filter="setting-pwd"
      style="display: none;padding: 10px">
    <input type="hidden" name="id" id="pwdId">
    <input type="hidden" name="favoritesId">
    <div class="layui-form-item">
        <label class="layui-form-label">登录账号</label>
        <div class="layui-input-inline" style="width: 160px;">
            <input type="text" name="account" id="account" placeholder="请输入账号" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-inline">
            <button type="button" id="accountCopy" class="layui-btn layui-btn-primary layui-btn-xs copy-btn" style="margin-top:8px"
                    data-clipboard-target="#account">复制
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">登录密码</label>
        <div class="layui-input-inline" style="width: 160px;">
            <input type="text" name="password" id="password" placeholder="请输入密码" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-inline">
            <button type="button" id="passwordCopy" class="layui-btn layui-btn-primary layui-btn-xs copy-btn" style="margin-top:8px"
                    data-clipboard-target="#password">复制
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="savePwd">立即提交</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="unsetPwd">清除密码</button>
        </div>
    </div>
</form>
<!-- 编辑分类表单 -->
<form class="layui-form" action="" id="update-category" lay-filter="update-category"
      style="display: none;padding: 10px 20px 10px 10px">
    <input type="hidden" name="id">
    <input type="hidden" name="count">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline" style="width: 228px;">
            <input type="text" name="name" id="categoryName" required lay-verify="required|category"
                   placeholder="请输入名称"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="sort" id="categorySort" placeholder="请输入数值" autocomplete="off"
                   class="layui-input layui-disabled" disabled>
        </div>
        <div id="categorySetTop">移动至最前</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">模式</label>
        <div class="layui-input-inline" style="width: 50px;">
            <input type="checkbox" name="bookmark" lay-skin="switch" value="1" lay-filter="bookmarkSwitch">
        </div>
        <div class="layui-form-mid layui-word-aux">强制切换至书签模式</div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="updateCategory">立即提交</button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" id="deleteCategory">删除</button>
            <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" id="clean">清空收藏</button>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="exportCategory">导出</button>
        </div>
    </div>
</form>
<!-- 目录 -->
<div id="catalog" class="catalog" style="display:none;">
    <div class="catalog-search">
        <i id="catalog_search_icon" class="layui-icon layui-icon-search catalog-search-icon"></i>
        <input type="text" id="catalog_search_name" name="catalog_search_name" placeholder="请输入分类名称"
               autocomplete="off"
               class="layui-input">
        <i id="catalog_search_close"
           class="layui-icon layui-icon-close-fill catalog-search-close layui-anim layui-anim-fadein"
           style="display:none;"></i>
    </div>
    <ul id="catalogList"></ul>
</div>
<div id="fastNavDiv" style="display:none;"></div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/config.js"></script>
<script src="js/common.js"></script>
<script src="layui/layui.js"></script>
<script src="plugin/clipboard.min.js"></script>
<script src="plugin/md5.min.js"></script>
<script src="plugin/Sortable.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>